<!DOCTYPE html>
<html>
<head>
    <title>个人中心</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 指定以IE8的方式来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/css/jsherp.css"/>
    <link rel="stylesheet" type="text/css"
          href="/js/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="/js/easyui/themes/icon.css"/>
    <script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript"
            src="/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/js/common/common.js"></script>
</head>
<body>
<div id="personalDlg" class="easyui-panel" data-options="fit:true" title="个人中心"
     iconCls="icon-user" style="padding:20px">
    
    <form id="personalFM" method="post" novalidate>
        <table style="width:100%">
            <tr>
                <td style="width:120px;">登录名称</td>
                <td style="padding:5px;">
                    <input name="loginName" id="loginName"
                           class="easyui-textbox"
                           data-options="readonly:true"
                           style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>用户身份</td>
                <td style="padding:5px;">
                    <input name="userRole" id="userRole"
                           class="easyui-textbox"
                           data-options="readonly:true"
                           style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>用户姓名</td>
                <td style="padding:5px;">
                    <input name="username" id="username" class="easyui-textbox"
                           data-options="required:true,validType:'length[2,30]'"
                           style="width: 230px;"
                           missingMessage="请输入用户姓名"/>
                </td>
            </tr>
            <tr>
                <td>部门</td>
                <td style="padding:5px;">
                    <input name="orgAbr" id="orgAbr" class="easyui-textbox"
                           readonly style="width: 120px;"/>
                    <input name="orgaId" id="orgaId" type="hidden"/>
                    <input name="selectType" id="selectType" type="hidden"/>
                    <input name="orgaUserRelId" id="orgaUserRelId" type="hidden"/>
                    <input name="id" id="id" type="hidden"/>
                </td>
            </tr>
            <tr>
                <td>职位</td>
                <td style="padding:5px;">
                    <input name="position" id="position" class="easyui-textbox"
                           style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td style="padding:5px;">
                    <input name="phonenum" id="phonenum"
                           class="easyui-numberbox" style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td style="padding:5px;">
                    <input name="email" id="email" class="easyui-textbox"
                           data-options="validType:'email'"
                           style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>用户排序</td>
                <td style="padding:5px;">
                    <input name="userBlngOrgaDsplSeq" id="userBlngOrgaDsplSeq"
                           class="easyui-textbox" style="width: 230px;"/>
                </td>
            </tr>
            <tr>
                <td>描述</td>
                <td style="padding:5px;">
                    <textarea name="description" id="description"
                              class="easyui-textbox"
                              data-options="multiline:true"
                              style="width: 230px;height: 40px;"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="padding:5px;">
                    <a href="javascript:void(0)" id="savePersonal"
                       class="easyui-linkbutton" iconCls="icon-save">保存</a>&nbsp;&nbsp;
                    <a href="javascript:void(0)" id="cancelPersonal"
                       class="easyui-linkbutton" iconCls="icon-redo">重置</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript">
    // 添加自定义验证规则
    $.extend($.fn.validatebox.defaults.rules, {
        mobile: {
            validator: function(value) {
                if (value == '') return true; // 允许为空
                return /^1[3-9]\d{9}$/.test(value);
            },
            message: '请输入正确的手机号码'
        }
    });
    
    //初始化界面
    $(function () {
        $('#personalFM').form({
            onSubmit: function () {
                return false;
            }
        });
        $("#personalDlg").panel({height: webH - 3, width: webW + 15});
        
        // 加载当前用户信息
        loadCurrentUserInfo();
    });
    
    // 加载当前用户信息
    function loadCurrentUserInfo() {
        $.ajax({
            type: "get",
            url: "/user/getUserSession",
            dataType: "json",
            success: function (res) {
                if (res && res.code === 200) {
                    if (res.data.user) {
                        var user = res.data.user;
                        var row = {
                            username: user.username,
                            loginName: user.loginName,
                            position: user.position,
                            email: user.email,
                            phonenum: user.phonenum,
                            description: user.description,
                            orgAbr: user.orgAbr || '',
                            orgaId: user.orgaId || '',
                            orgaUserRelId: user.orgaUserRelId || '',
                            userBlngOrgaDsplSeq: user.userBlngOrgaDsplSeq || '',
                            id: user.id
                        };
                        $('#personalFM').form('load', row);
                        
                        // 加载用户身份信息
                        loadUserRoleInfo();
                    }
                }
            },
            error: function () {
                $.messager.alert('提示', '获取用户信息失败，请稍后再试！', 'error');
            }
        });
    }
    
    // 加载用户身份信息
    function loadUserRoleInfo() {
        $.ajax({
            type: "get",
            url: "/user/getUserRoleInfo",
            dataType: "json",
            success: function (res) {
                if (res && res.code === 200) {
                    if (res.data.roleName) {
                        $('#userRole').textbox('setValue', res.data.roleName);
                    }
                }
            },
            error: function () {
                console.log('获取用户身份信息失败');
            }
        });
    }
    
    //重置
    $("#cancelPersonal").off("click").on("click", function () {
        loadCurrentUserInfo();
    });
    
    //初始化键盘enter事件
    $(document).keydown(function (event) {
        //兼容 IE和firefox 事件
        var e = window.event || event;
        var k = e.keyCode || e.which || e.charCode;
        //兼容 IE,firefox 兼容
        var obj = e.srcElement ? e.srcElement : e.target;
        //绑定键盘事件为 id是指定的输入框才可以触发键盘事件 13键盘事件
        if (k == "13" && (obj.id == "username" || obj.id == "position" || obj.id == "phonenum" || obj.id == "email" || obj.id == "description" || obj.id == "userBlngOrgaDsplSeq"))
            $("#savePersonal").click();
    });

    $("#savePersonal").unbind().bind({
        click: function () {
            if (!$('#personalFM').form('validate')) {
                return;
            } else {
                /**
                 * 2019-03-12
                 * 此处用户名和登录名是否重复的校验在保存操作时处理
                 * */
                var reg = /^([0-9])+$/;
                var phonenum = $.trim($("#phonenum").val());
                if (phonenum.length > 0 && !reg.test(phonenum)) {
                    $.messager.alert('提示', '电话号码只能是数字', 'info');
                    $("#phonenum").val("").focus();
                    return;
                }
                
                var userId = sessionStorage.getItem("userId");
                var url = '/user/updateUser?id=' + userId;
                
                $.ajax({
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: {
                        info: JSON.stringify($("#personalFM").serializeObject())
                    },
                    success: function (res) {
                        if (res && res.code != 200) {
                            $.messager.alert('提示', res.msg, 'error');
                            return;
                        }
                        $.messager.alert('提示', '个人信息更新成功！', 'info');
                        // 更新session中的用户信息
                        loadCurrentUserInfo();
                    },
                    //此处添加错误处理
                    error: function () {
                        $.messager.alert('提示', '网络异常，请稍后再试！', 'error');
                        return;
                    }
                });
            }
        }
    });
</script>
</body>
</html> 